<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #template {
            display: none;
        }

        .table tr:nth-of-type(1) th {
            width: 150px;
        }

        #mask {
            position: fixed;
            background-color: rgba(0, 0, 0, 0.5);
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
        }

        #popup {
            width: 1000px;
            height: 700px;
            background-color: white;
            border-radius: 15px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            display: none;
            box-sizing: border-box;
            padding-top: 20px;
        }

        .adds {
            float: right;
            margin-right: 15px;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        #send {
            position: relative;
            right: -40%;
        }

        #can {
            position: relative;
            right: -30%;
        }

        #cancle {
            border: 1px solid #999999;
            border-radius: 5px;
            position: absolute;
            top: 16px;
            right: 15px;
            padding: 1px 5px;
        }

        .del {
            width: 400px;
            height: 300px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            display: none;
            border-radius: 15px;
            box-sizing: border-box;
        }

        .del h3 {
            width: 360px;
            padding-left: 30px;
        }

        #canDe {
            position: absolute;
            bottom: 50px;
            right: 50%;
        }

        #sendDe {
            position: absolute;
            bottom: 50px;
            right: 15%;
        }

        h2 {
            width: 100%;
            text-align: center;
        }

        h4 {
            display: inline;
            margin-right: 15px;
        }

        .jump {
            float: left;
            margin-left: 20px;
            width: 70px;
            height: 30px;
            border: 1px solid #e3e3e3;
            border-radius: 6px;
            text-align: center;
            line-height: 30px;
        }

        .jump1 {
            float: left;
            margin-left: 20px;
            width: 70px;
            height: 30px;
            border: 1px solid #e3e3e3;
            border-radius: 6px;
            text-align: center;
            line-height: 30px;
        }

        a:hover {
            text-decoration: none;
        }

        .form-inline {
            margin-bottom: 20px;
            margin-left: 20px;
        }

        #chart {
            width: 950px;
            height: 700px;
        }

        #table-chart {
            height: 800px;
            display: none;
            padding-top: 20px;
        }

        #table-chart-zhe {
            height: 800px;
            display: none;
            padding-top: 20px;
        }
    </style>
</head>

<body>
    <h2>学生信息管理系统</h2>
    <div class="adds">
        <h4>欢迎 <b id="users"></b> 登录</h4>
        <button class="btn btn-primary" id="esc">退出</button>
    </div>
    <div class="jump"><a href="students.html">学生管理</a></div>
    <div class="jump1"><a href="score.html">成绩管理</a></div><br><br>
    <div class="form-inline">
        <div class="form-group">
            <select class="form-control subject">
                <option>全部科目</option>
            </select>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" id="name" placeholder="学生姓名">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" id="date" placeholder="日期">
        </div>
        <button class="btn btn-primary" id="query">查询</button>
    </div>
    <div id="table-chart"></div>
    <div id="table-chart-zhe"></div>
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>学号</th>
                <th>姓名</th>
                <th>学科</th>
                <th>分数</th>
                <th>考试日期</th>
                <th>操作</th>
            </tr>
            <tr id="template">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <button class="btn btn-danger  change">修改信息</button>
                    <button class="btn btn-primary details">查看该学员详细成绩</button>
                    <button class="btn btn-primary add">添加成绩记录</button>
                </td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div id="popup">
        <span id="cancle"> X </span>
        <div id="chart"></div>
    </div>
    <div id="mask"></div>
    <script src="jquery.min.js"></script>
    <script src="citys.js"></script>
    <script src="datepicker/WdatePicker.js"></script>
    <script src="echarts.min.js"></script>
    <script>
        let username = sessionStorage.getItem("username")
        if (!username) {
            location.href = "http://127.0.0.1/login.html"
        }
        $("#users").html(username)
        $.ajax({
            url: "http://127.0.0.1/score",
            success(data) {
                var data = JSON.parse(data);
                // 生成删选科目按钮
                for (let item of new Set(data.map(item => item.subject))) {
                    $(".subject").append($(`<option>${item}</option>`))
                }
                data.forEach(item => {
                    let newItem = $("#template").clone(true);
                    newItem.appendTo($("tbody")).attr("id", "")
                    newItem.find("td").eq(0).html(item.scoreId)
                    newItem.find("td").eq(1).html(item.id)
                    newItem.find("td").eq(2).html(item.name)
                    newItem.find("td").eq(3).html(item.subject)
                    newItem.find("td").eq(4).html(item.score)
                    newItem.find("td").eq(5).html(item.date)
                })
                $(".details").click(function () {

                    $.ajax({
                        url: "http://127.0.0.1/score",
                        data: {
                            id: $(this).closest("tr").find("td").eq(1).html()
                        },
                        success(data) {
                            $("#mask").fadeIn()
                            $("#popup").fadeIn()
                            var myChart = echarts.init($("#popup #chart")[0]);
                            var data = JSON.parse(data);
                            myChart.setOption({
                                tooltip: {},
                                title: {
                                    left: 'center',
                                    text: `${data[0].name} 在 ${data[0].date}考试中各科的详细成绩`
                                },
                                xAxis: {
                                    type: 'category',
                                    data: data.map(item => item.subject)
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    data: data.map(item => item.score),
                                    type: 'bar'
                                }]
                            });
                        }
                    })
                })
            }
        })

        $("#query").click(function () {
            let name = $("#name").val();
            let date = $("#date").val();
            let subject = $(".subject").val();
            if (!name && !date) {
                $("#table-chart").hide();
                $(".table").fadeIn();
                $.ajax({
                    url: "http://127.0.0.1/score",
                    success(data) {
                        var data = JSON.parse(data);
                        $("tbody").empty();
                        data.forEach(item => {
                            let newItem = $("#template").clone(true);
                            newItem.appendTo($("tbody")).attr("id", "")
                            newItem.find("td").eq(0).html(item.scoreId)
                            newItem.find("td").eq(1).html(item.id)
                            newItem.find("td").eq(2).html(item.name)
                            newItem.find("td").eq(3).html(item.subject)
                            newItem.find("td").eq(4).html(item.score)
                            newItem.find("td").eq(5).html(item.date)
                        })
                    }
                })
            }

            if (name && !date) {
                $.ajax({
                    url: "http://127.0.0.1/score",
                    data: {
                        name: name
                    },
                    success(data) {
                        var data = JSON.parse(data);
                        $("tbody").empty();
                        data.forEach(item => {
                            let newItem = $("#template").clone(true);
                            newItem.appendTo($("tbody")).attr("id", "")
                            newItem.find("td").eq(0).html(item.scoreId)
                            newItem.find("td").eq(1).html(item.id)
                            newItem.find("td").eq(2).html(item.name)
                            newItem.find("td").eq(3).html(item.subject)
                            newItem.find("td").eq(4).html(item.score)
                            newItem.find("td").eq(5).html(item.date)
                        })
                    }
                })
            }


            if (name && date) {
                $.ajax({
                    url: "http://127.0.0.1/score",
                    data: {
                        name: name,
                        date: date
                    },
                    success(data) {
                        $(".table").hide();
                        var myChart = echarts.init($("#table-chart").fadeIn()[0]);
                        var data = JSON.parse(data);
                        myChart.setOption({
                            tooltip: {},
                            title: {
                                left: 'center',
                                text: `${data[0].name} 在 ${data[0].date}考试中各科的详细成绩`
                            },
                            xAxis: {
                                type: 'category',
                                data: data.map(item => item.subject)
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: data.map(item => item.score),
                                type: 'bar'
                            }]
                        });
                    }
                })
            }
            if (name && subject) {
                $.ajax({
                    url: "http://127.0.0.1/score",
                    data: {
                        name: name,
                        subject: subject
                    },
                    success(data) {
                        $(".table").hide();
                        var myChart = echarts.init($("#table-chart-zhe").fadeIn()[0]);
                        var data = JSON.parse(data);
                        myChart.setOption({
                            tooltip: {},
                            title: {
                                left: 'center',
                                text: `${data[0].name} 在${data[0].subject}考试中各科的详细成绩`
                            },
                            xAxis: {
                                type: 'category',
                                data: data.map(item => item.date)
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: data.map(item => item.score),
                                type: 'line'
                            }]
                        });
                    }
                })
            }
        })
        $("#esc").click(function () {
            sessionStorage.clear();
            location.href = "http://127.0.0.1/login.html"
        })
        $("#cancle").click(function () {
            $("#popup").fadeOut();
            $("#mask").fadeOut();
        })
        $("#date").click(function () {
            WdatePicker({
                el: this,
                dateFmt: 'yyyy/MM/dd'
            })
        })
        window.onkeydown = function (event) {
            if (event.keyCode === 13) {
                $("#query").click()
            }
        }
    </script>
</body>

</html>